<!--  -->
<template>
  <div class='pay'>
    <el-dialog
      title="缴费"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div>
        <!-- <div class="item">
          <p>房号/展场编号：</p>
          <p></p>
        </div> -->
        <div class="item">
          <p>公司名称：</p>
          <p>{{item.companyName}}</p>
        </div>
        <div
          class="item"
          v-if="!method"
        >
          <p>区域：</p>
          <p>{{item.area}}</p>
        </div>
        <div
          class="item"
          v-if="method==1"
        >
          <p>房产编号：</p>
          <p>{{item.ctContractProject}}</p>
        </div>
        <div class="item">
          <p>缴费日期：</p>
          <p>{{item.payCost?item.payCost.substr(0,8).replace('-','年').replace('-','月'):''}}</p>
        </div>
        <!-- <div class="item">
          <p>应缴月份：</p>
          <p></p>
        </div> -->
        <div
          class="item"
          v-if="!method"
        >
          <p>应缴金额（元）：</p>
          <p style="color:red;font-size:20px;">{{item.money}}{{item.isOneData?"(含保证金:"+item.guaranteeAmount+")":''}}</p>
        </div>
        <div
          class="item"
          v-if="method==1||method==2"
        >
          <p>应缴金额（元）：</p>
          <!-- <p style="color:red;font-size:20px;">{{summoney}}{{item.isOneData?"(含保证金:"+item.guaranteeAmount+")":''}}</p> -->
          <p style="color:red;font-size:20px;">{{summoney}}{{item.isOneData?"(含保证金:"+AllguaranteeAmount+")":''}}</p>
        </div>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="支付方式"
          prop="payType"
        >
          <el-select
            :disabled="isInvoice==1"
            v-model="ruleForm.payType"
            placeholder="请选择支付方式"
          >
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开票">
          <el-radio-group
            v-model="ruleForm.isInvoice"
            @change="resourceChange"
          >
            <el-radio label="是"></el-radio>
            <el-radio
              label="否"
              v-if="!isInvoice==1"
            ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="发票类型"
          prop="invoiceType"
          v-if="ruleForm.isInvoice=='是'"
        >
          <el-select
            @change="invoiceTypeChange"
            v-model="ruleForm.invoiceType"
            placeholder="请选择发票类型"
          >
            <el-option
              v-for="(item,index) in invoiceoptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="发票抬头"
          prop="invoiceHead"
          v-if="ruleForm.isInvoice=='是'"
        >
          <!-- <el-input
            v-model="ruleForm.name"
            placeholder="请选择输入发票抬头"
          ></el-input> -->
          <el-radio-group
            v-model="ruleForm.invoiceHead"
            @change="radioChange"
          >
            <el-radio-button label="单位"></el-radio-button>
            <el-radio-button
              label="个人"
              :disabled="ruleForm.invoiceType==1"
            ></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="单位名称"
          prop="name"
          v-if="ruleForm.isInvoice=='是' &&ruleForm.invoiceHead!='个人'"
        >
          <el-input
            disabled
            v-model="ruleForm.companyName"
            placeholder="单位名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="纳税人识别号"
          v-if="ruleForm.isInvoice=='是'&&ruleForm.invoiceHead!='个人'"
        >
          <el-input
            disabled
            v-model="ruleForm.taxRateNumber"
            placeholder="请填写纳税人识别号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发票票号"
          prop="invoiceNumber"
          v-if="ruleForm.isInvoice=='是'"
        >
          <el-input
            v-model="ruleForm.invoiceNumber"
            placeholder="请填写增值税发票票号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="doSubmit"
          icon="el-icon-circle-check"
        >提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  getObj
} from '@/api/market/contract/person'
import { getDicType } from '@/api/common'
import { UpdatePay } from '@/api/cothercost'
import { payput } from '@/api/management/index'
import { UpdatePays } from '@/api/mrcost'
import { syscompanyid } from '@/api/market/contract/person'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      item: {},
      ruleForm: {
        type: 0,
        payType: '',
        name: '',
        isInvoice: '是',
        invoiceHead: '单位',
        invoiceType: '',
        companyName: '',
        taxRateNumber: '',
        invoiceNumber: '',
        isOneData: ''
      },
      rules: {
        payType: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
        invoiceType: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
        invoiceHead: [{ required: true, message: '请选择发票抬头', trigger: 'change' }],
        invoiceNumber: [{ required: true, message: '请填写发票票号', trigger: 'blur' }]
      },
      options: [],
      invoiceoptions: [{
        label: '增值税普通发票',
        value: 0
      }, {
        label: "增值税专用发票",
        value: 1
      }],
      method: '',
      ids: [],
      // 开票按钮触发的
      isInvoice: '',
      summoney: 0,
      AllguaranteeAmount: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    radioChange () {
      this.ruleForm.companyName = ''
      this.ruleForm.taxRateNumber = ''
      if (this.ruleForm.invoiceHead == '单位') {
        this.ruleForm.companyName = this.item.companyName
        this.ruleForm.taxRateNumber = this.item.taxRateNumber
      }
    },
    invoiceTypeChange () {
      if (this.ruleForm.invoiceType == 1) {
        this.ruleForm.invoiceHead = '单位'
        this.ruleForm.companyName = this.item.companyName
        this.ruleForm.taxRateNumber = this.item.taxRateNumber
      }

    },
    resourceChange () {
      this.ruleForm.invoiceType = ''
      this.ruleForm.companyName = ''
      this.ruleForm.invoiceHead = ''
      this.ruleForm.taxRateNumber = ''
      this.ruleForm.invoiceNumber = ''
      if (this.ruleForm.isInvoice == '是') {
        this.ruleForm.companyName = this.item.companyName
        this.ruleForm.taxRateNumber = this.item.taxRateNumber
      }
    },
    doSubmit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let type = null
          if (this.ruleForm.isInvoice == '是') {
            type = 1
            if (this.isInvoice === 1) {
              type = 2
            }
          } else {
            type = 1
          }
          if (!this.method) {
            UpdatePay({
              id: this.item.id,
              type: 0,
              payType: parseInt(this.ruleForm.payType),
              isInvoice: this.ruleForm.isInvoice == '是' ? 0 : 1,
              invoiceType: this.ruleForm.invoiceType,
              invoiceHead: this.ruleForm.invoiceHead == '单位' ? 0 : 1,
              invoiceNumber: this.ruleForm.invoiceNumber,
              companyName: this.ruleForm.companyName,
              taxRateNumber: this.ruleForm.taxRateNumber
            }).then(res => {
              this.dialogVisible = false
              this.$message.success("缴费成功")
              this.$emit('refreshList')
            })
          } else if (this.method == 1) {
            payput({
              ids: this.ids,
              companyId: this.ruleForm.companyId,
              payType: parseInt(this.ruleForm.payType),
              isInvoice: this.ruleForm.isInvoice == '是' ? 0 : 1,
              type: type,
              invoiceType: this.ruleForm.invoiceType,
              invoiceHead: this.ruleForm.invoiceHead == '单位' ? 0 : 1,
              invoiceNumber: this.ruleForm.invoiceNumber,
              companyName: this.ruleForm.companyName,
              taxRateNumber: this.ruleForm.taxRateNumber
            }).then(res => {
              this.dialogVisible = false
              this.$message.success("缴费成功")
              this.$emit('refreshList')
            })
          } else if (this.method == 2) {
            UpdatePays({
              ids: this.ids,
              companyId: this.ruleForm.companyId,
              payType: parseInt(this.ruleForm.payType),
              isInvoice: this.ruleForm.isInvoice == '是' ? 0 : 1,
              invoiceType: this.ruleForm.invoiceType,
              type: type,
              invoiceHead: this.ruleForm.invoiceHead == '单位' ? 0 : 1,
              invoiceNumber: this.ruleForm.invoiceNumber,
              companyName: this.ruleForm.companyName,
              taxRateNumber: this.ruleForm.taxRateNumber
            }).then(res => {
              this.dialogVisible = false
              this.$message.success("缴费成功")
              this.$emit('refreshList')
            })
          }
        } else {
          return false;
        }
      });
    },
    handleClose () {
      this.dialogVisible = false
    },
    init (item, method, type, isInvoice) {
      this.ids = []
      this.method = method
      this.isInvoice = isInvoice
      getDicType('payment_method').then(res => {
        this.options = res.data.data
      })
      this.ruleForm = {
        type: 0,
        payType: '',
        name: '',
        isInvoice: '是',
        invoiceHead: '单位',
        invoiceType: '',
        companyName: '',
        taxRateNumber: '',
        invoiceNumber: '',
        isOneData: ''
      }
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      // this.item = item
      let reqId = ''
      if (method == 1 || method == 2) {
        // reqId = item[0].contractId
        reqId = item[0].companyId
        this.summoney = 0
        this.AllguaranteeAmount = 0
        item.forEach(item => {
          this.ids.push(item.id)
          this.summoney = this.summoney + item.totalAmount
          this.AllguaranteeAmount = this.AllguaranteeAmount + item.guaranteeAmount
        });
        this.summoney = this.summoney.toFixed(2)
        this.AllguaranteeAmount = this.AllguaranteeAmount.toFixed(2)
        this.item = item[0]
        if (this.isInvoice == 1) {
          this.ruleForm.payType = item[0].payType + ''
        }
      } else {
        // reqId = item.contractId
        // reqId = item.companyId
        reqId = item.companyNameId
        this.item = item
      }
      // let reqId = ''
      // if (type) {
      //   reqId = item.companyNameId
      // } else {
      //   reqId = item.companyId
      // }
      syscompanyid({}, parseInt(reqId)).then(res => {
        // getObj(reqId).then(res => {
        // this.ruleForm.companyName = res.data.data.companyName
        // this.ruleForm.taxRateNumber = res.data.data.taxpayerNumber
        // this.item.companyName = res.data.data.companyName
        // this.item.taxRateNumber = res.data.data.taxpayerNumber
        this.ruleForm.companyName = res.data.data.name
        this.ruleForm.taxRateNumber = res.data.data.taxRateNumber
        this.item.companyName = res.data.data.name
        this.item.taxRateNumber = res.data.data.taxRateNumber
      })

      this.dialogVisible = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
/deep/ .el-dialog__body {
  padding: 10px 20px !important;
}
.item {
  display: flex;
  align-items: center;
  p:first-child {
    width: 120px;
    text-align: right;
  }
}
</style>
